window.onload = function () {
  // 获取DOM函数封装
  function $(className) {
    return document.getElementsByClassName(className)[0];
  }

  // 获取DOM
  var carousel = $("carousel");
  var imgs = $("imgs");
  var imgsLi = imgs.getElementsByTagName("li");
  var prev = $("prev");
  var next = $("next");
  var count = $("count");
  var countLi = count.getElementsByTagName("li");

  var timer1 = null; //计数器1
  var timer2 = null; //计数器2
  var speed = 20; //速度
  var now = 0; //初始显示的是第一张图的下标
  var imgWidth = imgsLi[0].offsetWidth; //每张图的宽度
  console.log(imgWidth);

  // 改变分页器的外观且让图轮播起来
  function tab() {
    // 清空所有li标签上的active类名
    for (var i = 0, len = countLi.length; i < len; i++) {
      countLi[i].classList.remove("active");
    }
    // 给当前li添加active类
    countLi[now].classList.add("active");
    // 轮播组图
    move(imgs, -(now * imgWidth), speed);
    // -(now*imgWidth) 往右移动，left<0
  }

  // 单击分页器显示对应的图片
  for (var i = 0, len = countLi.length; i < len; i++) {
    // 为每一个li标签添加一个index属性用于保存下标
    countLi[i].index = i;
    countLi[i].onclick = function () {
      console.log(this.index);
      // 将当前点击的分页器的下标传给now
      // 将分页器的下标与轮播图的图关联起来(通过下标关联)
      now = this.index;
      tab();
    };
  }

  // 切换到上一张图(向左翻页)
  prev.onclick = function () {
    // 越界处理
    if (now == 0) {
      now = imgsLi.length - 1;
    } else {
      now--;
    }
    tab();
  };
  // 切换到下一张图(向左翻页)
  next.onclick = function () {
    if (now == imgsLi.length - 1) {
      now = 0;
    } else {
      now++;
    }
    tab();
  };
  // 自动轮播(默认向右自动翻页)
  timer1 = setInterval(next.onclick, 3000);

  // 定义一个move方法，实现组图的移动，让其移动到指定位置
  // 组图每隔speed移动一定距离,直至移动完distance的距离
  function move(imgs, distance, speed) {
    // 当再次调用move时要先清除上次的定时器
    clearInterval(timer2);
    timer2 = setInterval(function () {
      // 方法一：
      /*       var left = imgs.offsetLeft;
      // left为imgs在左侧滚动条内隐藏的距离 left<0
      // distance - left:要向左移动的距离-左侧滚动条内已有的距离=剩下还要移动的距离
      var nowSpeed = (distance - left) / 5.5555; //设置速度 3.333:减小计算误差
      // 设置每次定时器结束后，定位left要增加的值
      imgs.style.left = left + nowSpeed + "px";
 */
      //方法二：
      imgs.style.left = distance + "px";
      //让left直接等于要移动的全部距离(没有过渡效果)需要为left添加过渡动画。
      //对应的CSS:  transition: left .5s ease;  /* linear:匀速 ease:慢快慢 */
      //好处：可以避免计算不精确导致的1-4px的偏差
    }, speed);
  }

  // 鼠标悬停
  carousel.onmouseover = function () {
    clearInterval(timer1);
  };
  carousel.onmouseout = function () {
    timer1 = setInterval(next.onclick, 3000);
  };

  // 按下键盘上的左右键，实现切换效果
  // 实现逻辑：通过获取左右键的键值，通过键值匹配调用控制器函数实现
  window.onkeydown = function (e) {
    // 兼容处理
    e = e || window.event;
    console.log(e);
    console.log(e.keyCode);
    // 左键keyCode37，右键keyCode39
    if (e.keyCode == 37) {
      prev.onclick();
    } else if (e.keyCode == 39) {
      next.onclick();
    }
  };

  // 鼠标滚轮上滚，下滚实现轮播效果
  // 实现原理：滚轮向下滚动：e.deltaY为正数,滚轮向上滚动：e.deltaY为负数
  window.onmousewheel = function (e) {
    console.log(e);
    if (e.deltaY > 0) {
      prev.onclick();
    } else if (e.deltaY < 0) {
      next.onclick();
    }
  };
};
